<template>
    <teleport to=".header">
        <SdyHeader center="search"></SdyHeader>
    </teleport>

    <div class="sdy-cate">
        <ul class="slide">
            <li v-for="(item, index) in cateList" :key="item" :class="{ active: index === currentCate }"
                @click="currentCate = index">{{ item }}</li>
        </ul>
        <ul class="container">
            <li v-for="item in goodsList" :key="item.cate">
                <div class="top">{{ item.brand }}</div>
                <div class="content">
                    <p @click="$myRouter.push({ path: '/list', query: { keyword: goods.brand } })"
                        v-for="goods in item.list" :key="goods.proid">
                        <img :src="goods.img1" alt="">
                        <span>￥ {{ goods.originprice.toFixed(2) }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script name="sdyCate" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { ref, onMounted, watch } from 'vue'
import { getCateList, getBrandList, getGoodsForCateAndBrand } from '../../model/goods'
import { useRouter } from 'vue-router'
const $myRouter = useRouter()

// 接口
interface GoodsInfo {
    proid: string
    img1: string
    originprice: number
    [key: string]: any
}

interface GoodsList {
    cate: string
    brand: string
    list: Array<GoodsInfo>
}

// 分类目录列表
const cateList = ref<string[]>([])

// 当前选中的分类
const currentCate = ref<number>(0)

// 获取分类列表
const getCateListHandler = async () => {
    const res = await getCateList()
    if ((res as unknown as any).code !== '200') return
    cateList.value = res.data.map((item: string) => item.trim())
}

// 品牌列表
const barndList = ref<{ brand: string }[]>([])

// 商品数据
const goodsList = ref<Array<GoodsList>>([])

// 对应品牌的对应商品
const getGoodsList = async () => {
    goodsList.value = []
    // 遍历品牌列表
    barndList.value.forEach(async item => {
        const res = await getGoodsForCateAndBrand(cateList.value[currentCate.value], item.brand)
        // 给goodsList内的内容赋值
        if ((res as any).code !== '200') return
        goodsList.value.push({
            cate: cateList.value[currentCate.value],
            brand: item.brand,
            list: res.data
        })
    })
}

// 监控currentCate变换
watch(currentCate, async (newVal) => {
    const cate: string = cateList.value[newVal]
    // 发送请求,请求品牌列表
    const res = await getBrandList(cate || '手机')
    if ((res as any).code !== '200') return
    barndList.value = res.data
    setTimeout(() => {
        getGoodsList()
    }, 10)
}, {
    immediate: true,
})

onMounted(() => {
    getCateListHandler()
})

</script>

<style scoped lang="scss">
.sdy-cate {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;

    >.slide {
        width: 80px;
        overflow: auto;

        >li {
            background-color: #F6F6F6;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            transition: all .3s linear;

            &.active {
                background-color: #fff;
                color: red;
            }
        }
    }

    >.container {
        flex: 1;
        overflow: auto;
        box-sizing: border-box;
        padding: 5px;

        >li {
            margin-bottom: 30px;

            >.top {
                height: 30px;
                font-weight: 700;
            }

            >.content {
                display: block;
                padding: 0 10px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                >p {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    >img {
                        width: 60px;
                        height: 60px;
                        margin-bottom: 10px;
                        display: block;
                    }

                    >span {
                        color: red;
                    }
                }
            }
        }
    }
}
</style>
